<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a responsive product landing page.">
    <title>Open Banking Apis</title>

    <link rel="stylesheet" href="css/pure/pure-min.css"/>
    <link rel="stylesheet" href="css/iconfont.css"/>

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/pure/grids-responsive-old-ie-min.css">
    <link rel="stylesheet" href="css/pure/layouts/marketing-old-ie.css">
    <link rel="stylesheet" href="css/pure/layouts/pricing-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="css/pure/grids-responsive-min.css">
    <link rel="stylesheet" href="css/pure/layouts/marketing.css">
    <link rel="stylesheet" href="css/pure/layouts/pricing.css">
    <!--<![endif]-->

    <style>
        * {
            font-family: PTSansRegular, Arial, Helvetica, sans-serif;
        }

        .home-menu {
            background-color: #fff;
        }

        .home-menu .pure-menu-heading {
            color: #515b69;
            text-transform: none;
            font-size: 28px;
            font-weight: bold;
        }

        .home-menu .pure-menu-selected a, .home-menu .pure-menu-selected a:active {
            color: #0078e7;
        }

        .home-menu a {
            color: #515b69;
        }

        .content-subhead {
            text-transform: none;
            letter-spacing: 0;
            font-size: 40px;
            line-height: 1.2;
            color: #515b69;
        }

        .content-subhead-title {
            font-size: 22px;
            line-height: 1;
            font-weight: 400;
            font-family: "Open Sans";
            text-transform: none;
            letter-spacing: 0;
        }

        .content-subhead-content {
            color: #7f8795;
            font-size: 18px;
            line-height: 32px;
        }

        .content:nth-child(odd) {
            background-color: #f2f7fd;
        }

        .content:nth-child(even) {
            background-color: #fff;
        }

        .l-box {
            padding: 0em 5em;
        }

        .pricing-table {
            background-color: #fff;
        }

        .pricing-table-header {
            line-height: 1;
        }

        .content-subhead-title i {
            font-size: 34px;
            color: #1E8AE9;
        }

        .t-and-c {
            font-size: 20px;
            color: #666;
            line-height: 1.5;
            margin: 5px 0px;
        }

        .t-and-c i {
            font-size: 24px;
            color: #666;
        }

        .content-subhead-title a, .content-subhead-title a:active {
            color: #34495e;
        }
        .pricing-table h2{
            text-transform: none;
            letter-spacing: 0;
            color: #666;
        }
        .footer{
            background-color: #515b69;
            color: #eee;
        }

    </style>

    <style>

        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

    </style>

</head>
<body>


<div class="header">
    <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href="">Open Financial Platform</a>

        <ul class="pure-menu-list" style="margin-top:0.5em;">
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">
                    Home
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#api" class="pure-menu-link">
                    API
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#sandbox" class="pure-menu-link">
                    SandBox
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#EcoSystem" class="pure-menu-link">
                    EcoSystem
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">
                    SignIn
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">
                    Contact Us
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="splash-container" style="background-image: url(images/banner.jpg);
    background-position:center;background-color:#fff; background-size:cover;">
    <div class="splash" style="text-transform: none;top: 0;width: 80%;">
        <h1 class="splash-head" style="border: 0px;">The leading Open API middleware for banking, Insurance, Security</h1>
        <p class="splash-subhead" style="font-size: 32px;">
            <span id="apiNum">150</span> APIs
        </p>
    </div>
</div>

<div class="content-wrapper">
    <div class="content">
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead">
                    Innovative Model
                </h3>
                <p class="content-subhead-content">
                    Global community of innovators who are keen to collaborate in FinTech with Bank, Insurance and Security.
                    Giving thousands of developer a superior experience and unparalleled access to tools and documentation to boost their productivity.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <img style="width: 550px;" alt="File Icons" class="pure-img-responsive" src="images/eo.png">
            </div>
        </div>
    </div>

    <div class="content" id="EcoSystem">
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <img style="width: 550px;" alt="File Icons" class="pure-img-responsive" src="images/vm.png">
            </div>

            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead">
                    Open Eco-System
                </h3>
                <p class="content-subhead-content">
                    OFP offers a fully-operational and self-contained sandbox environment for Banking, Insurance, Security.
                    This sandbox environment enables the institution(s) to offer an experimentation facility without connecting to production systems (pretty good for hackathons and prototyping).
                    It provides 150 pre-built APIs to developer (for example: accounts, transactions, payments, KYC, etc)
                </p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead">
                    Enhance Security & Control
                </h3>
                <p class="content-subhead-content">
                    OFP offer it's own API Manager which handles access control, monitoring, authentication & authorization,
                    APIs can be easily managed and  expose or publish.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <img style="width: 550px;" alt="File Icons" class="pure-img-responsive" src="images/th.png">
            </div>
        </div>
    </div>

    <div class="content" id="api">
        <h2 class="is-center content-subhead" style="text-transform: none;">Open Banking API</h2>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-zhanghaoguanli"></i>
                    <a style="text-decoration: none;" href="swagger-ui.html">
                        Accounts
                    </a>
                </h3>
                <p>
                    Access the user’s list of accounts and account information such as the balance
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-jiaoyiguanli"></i>
                    <a style="text-decoration: none;">
                        Transactions
                    </a>
                </h3>
                <p>
                    Access the transaction history and metadata of accounts
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-fukuan"></i>
                    <a style="text-decoration: none;">
                        Payments and transaction requests
                    </a>
                </h3>
                <p>
                    Initiate transfers. View and confirm charges (as per PSD2).
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-kaihu"></i>
                    <a style="text-decoration: none;">
                        Onboarding and KYC
                    </a>
                </h3>
                <p>
                    Perform user, customer and account creation. Access Know Your Customer (KYC) documents, media and
                    KYC status.
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-jijianjieru"></i>
                    <a style="text-decoration: none;">
                        Counterparties
                    </a>
                </h3>
                <p>
                    Access the payers & payees of an account including metadata such as their aliases, labels, logos and
                    home pages.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-huiyi"></i>
                    <a style="text-decoration: none;">
                        Customer meetings, messages and video conferencing
                    </a>
                </h3>
                <p>
                    Enable customer meetings, messages and video conferencing for KYC and CRM operations (uses third
                    party video streaming).
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-fenhang"></i>
                    <a style="text-decoration: none;">
                        Branches, ATMs
                    </a>
                </h3>
                <p>
                    Access the list of branches and ATMs for the specified bank including geolocation and opening hours.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-yuanshujupeizhi"></i>
                    <a style="text-decoration: none;">
                        Metadata
                    </a>
                </h3>
                <p>
                    Enrich transaction and counterparties with metadata including geolocations, comments,
                    pictures and tags (e.g. category of spending).
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-quanxianyingyongguanli"></i>
                    <a style="text-decoration: none;">
                        Entitlements
                    </a>
                </h3>
                <p>
                    Enable account holders to grant fine-grained access to third-party users and applications.
                    For instance, a business account might provide auditors with full read-only access whilst coworkers
                    might only see the account balance.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-erji-anquanshebei"></i>
                    <a style="text-decoration: none;">
                        Security challenges
                    </a>
                </h3>
                <p>
                    Step up authentication using the generic challenge / response mechanism for sensitive operations
                    e.g.
                    to progress a transfer, the user must supply a mobile TAN.
                </p>
            </div>
        </div>
    </div>

    <div class="content">
        <h2 class="is-center content-subhead" style="text-transform: none;">Open Insurance API</h2>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-tubiaozhizuomoban"></i>
                    <a style="text-decoration: none;">
                        Health Insurance
                    </a>
                </h3>
                <p>
                    Health Insurance for Individuals and Family.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-lvyou"></i>
                    <a style="text-decoration: none;">
                        Travel Insurance
                    </a>
                </h3>
                <p>
                    Our system gives you the ability to compare the best travel insurance providers.
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-zhongqingdianxinicon05"></i>
                    <a style="text-decoration: none;">
                        Commerce
                    </a>
                </h3>
                <p>
                    Let customers protect the stuff they buy on your site.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-fenhang"></i>
                    <a style="text-decoration: none;">
                        Real Estate Marketplaces
                    </a>
                </h3>
                <p>
                    Renters and homeowners insurance for your residents in just a few clicks.
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-jinrong"></i>
                    <a style="text-decoration: none;">
                        Financial Services
                    </a>
                </h3>
                <p>
                    Help your users improve their financial stability with proper coverage.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-zhinengjiaju"></i>
                    <a style="text-decoration: none;">
                        Smart Home Security
                    </a>
                </h3>
                <p>
                    Offer full protection with discounts and total peace of mind.
                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-baoxian"></i>
                    <a style="text-decoration: none;">
                        Insurance As A Service
                    </a>
                </h3>
                <p>
                    Brokers, get your users insured in seconds, this time with no paperwork.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-qita"></i>
                    <a style="text-decoration: none;">
                        Everything Else
                    </a>
                </h3>
                <p>
                    We're open to ideas! Let us know how Lemonade can be integrated in your app.
                </p>
            </div>
        </div>
    </div>

    <div class="content">
        <h2 class="is-center content-subhead" style="text-transform: none;">Open Security API</h2>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-zhanghaoguanli"></i>
                    <a style="text-decoration: none;">
                        Account
                    </a>
                </h3>
                <p>

                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-maoyi-"></i>
                    <a style="text-decoration: none;">
                        Trade
                    </a>
                </h3>
                <p>

                </p>
            </div>
        </div>

        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-shichang"></i>
                    <a style="text-decoration: none;">
                        Market Information
                    </a>
                </h3>
                <p>

                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-2">
                <h3 class="content-subhead-title">
                    <i class="iconfont icon-data-set"></i>
                    <a style="text-decoration: none;">
                        Dataset
                    </a>
                </h3>
                <p>

                </p>
            </div>
        </div>
    </div>

    <div class="content" id="sandbox">
        <h2 class="is-center content-subhead" style="text-transform: none;">SandBox</h2>

        <div class="pricing-tables pure-g" style="max-width: none;">
            <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-3">
                <div class="pricing-table">
                    <div>
                        <img style="width: 300px;" src="images/sandbox.png">
                        <h2>Open Banking Sandbox</h2>
                    </div>
                    <button class="button-choose pure-button button-success">Sandbox</button>
                </div>
            </div>

            <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-3">
                <div class="pricing-table">
                    <div>
                        <img style="width: 300px;" src="images/sandbox.png">
                        <h2>Open Insurance Sandbox</h2>
                    </div>
                    <button class="button-choose pure-button button-success">Sandbox</button>
                </div>
            </div>

            <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-3">
                <div class="pricing-table">
                    <div>
                        <img style="width: 300px;" src="images/sandbox.png">
                        <h2>Open Security Sandbox</h2>
                    </div>
                    <button class="button-choose pure-button button-success">Sandbox</button>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-1 pure-u-lg-1-1">
                <h2 class="content-head is-center" style="text-transform: none;font-size: 2.5em;line-height: 1.2">
                    Let us help you accelerate your Open Banking journey
                </h2>
            </div>
        </div>
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-1-1 pure-u-lg-1-1" style="text-align: center">
                <button class="button-choose pure-button button-success">Contact</button>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-md-2-5 pure-u-lg-2-5">
                <h4 class="content-subhead" style="font-size: 28px;line-height: 1;">
                    <i class="fa fa-th-large"></i>
                    Open Financial Platform
                </h4>
                <p class="content-subhead-content">
                    OBP comes with its own API Manager which handles access control, monitoring and authentication,
                    putting the bank in control of the third party partner relation.
                    Banks can decide which APIs to expose and to whom, and can revoke access at any time.
                    The solution is deployed on-site behind the bank’s firewall, ensuring a level of security equal to
                    or better than the bank’s current systems.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-md-3-5 pure-u-lg-3-5" style="margin-top: 1.5em;">
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5">
                        <h4 class="content-subhead-title t-and-c">
                            <i class="iconfont icon-right"></i>
                            Partners
                        </h4>
                    </div>
                    <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-3-5">
                        <h4 class="content-subhead-title t-and-c">
                            <i class="iconfont icon-right"></i>
                            PSD2
                        </h4>
                    </div>
                </div>

                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5">
                        <h4 class="content-subhead-title t-and-c">
                            <i class="iconfont icon-right"></i>
                            Consultancy
                        </h4>
                    </div>
                    <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-3-5">
                        <h4 class="content-subhead-title t-and-c">
                            <i class="iconfont icon-right"></i>
                            Sandbox
                        </h4>
                    </div>
                </div>

                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5">
                        <h4 class="content-subhead-title t-and-c">
                            <i class="iconfont icon-right"></i>
                            Investigation
                        </h4>
                    </div>
                    <div class="pure-u-1 pure-u-md-2-5 pure-u-lg-3-5">
                        <h4 class="content-subhead-title t-and-c">
                            <i class="iconfont icon-right"></i>
                            Publication and Media
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="footer l-box is-center">
        © Copyright 2012 - 2018 | All Rights Reserved
    </div>

</div>

<script type="text/javascript" src="js/libs/countUp.min.js"></script>
<script>
    var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
    };
    var apiNum = new CountUp('apiNum', 0, 150, 0, 2.4, options);
    if (!apiNum.error) {
        apiNum.start();
    } else {
        // console.error(demo.error);
    }
</script>
</body>
</html>
